<template>
	<view class="">
		<u-popup :show="_show" mode="bottom" custom-style="height: 50%;" @close="onClose">
			<view class="top-action fboxCol Ycenter Xcenter">
				<view class="fboxRow Ycenter w690 font26">
					<view class="fboxRow Ycenter Xcenter color-9899A1" @tap="onClose">取消</view>
					<view class="flex1"></view>
					<view class="fboxRow Ycenter Xcenter color-00C15D" :loading="loading" @tap="onSubmit">确认</view>
				</view>
			</view>
			<block v-for="(item,index) in filterList" :key="index">
				<view class="filter-item" v-if="item.key != 'fixedChoice'">
					<view class="tit fboxRow Ycenter Xcenter font28 color-6A6A6F">{{item.title}}</view>
					<view class="fboxWrap Ycenter Xcenter">
						<view
						 v-for="(subItem, subIndex) in item.list" :key="subIndex"
							class="tag fboxRow Ycenter Xcenter font28 " :class="subItem.on ? 'on color-00C15D' : 'color-9899A1'"
							:data-key="item.key" :data-tag="subItem" @tap="tagClick">
							{{subItem.subjectName}}</view>
					</view>
				</view>
			</block>
		</u-popup>
	</view>
</template>

<script>
	import {
		myScoreRecordDelete,
		scoreEntering,
		bksScoreAnalysisName,
		isAnalysis
	} from '@/api/bks.volunteer.js'
	import {
		getBksInfo
	} from '@/static/js/bks.common.js'
	export default {
		props: {
			scoreList: {
				type: Object,
				default: () => {
					return {
						// "scoreInfos": [],
						// examName: '三诊成绩',
						// time: '2021.04.28 14:30:20'
					}
				}
			},
			show: {
				type: Boolean,
				default: false
			},
			type: {
				type: [Number, String],
				default: ''
			}
		},
		data() {
			return {
				filterList: [{
						title: '固定科目',
						key: 'fixedChoice',
						list: [{
								id: 'chinese',
								subjectName: '语文',
								on: true,
								max: 150,
								subjectScore: ''
							},
							{
								id: 'mathematics',
								subjectName: '数学',
								on: true,
								max: 150,
								subjectScore: ''
							},
							{
								id: 'english',
								subjectName: '外语',
								on: true,
								max: 150,
								subjectScore: ''
							}
						]
					},
					{
						title: '首选科目（二选一）',
						key: 'firstChoice',
						list: [{
								id: 'physical',
								subjectName: '物理',
								max: 100,
								subjectScore: ''
							},
							{
								id: 'history',
								subjectName: '历史',
								max: 100,
								subjectScore: ''
							},
						]
					},
					{
						title: '再选科目（四选二）',
						key: 'theChoice',
						list: [{
								id: 'biological',
								subId: 'newBiological',
								subjectName: '生物学',
								max: 100,
								subjectScore: ''
							},
							{
								id: 'chemical',
								subId: 'newChemical',
								subjectName: '化学',
								max: 100,
								subjectScore: ''
							},
							{
								id: 'political',
								subId: 'newPolitical',
								subjectName: '思政',
								max: 100,
								subjectScore: ''
							},
							{
								id: 'geographic',
								subId: 'newGeographic',
								subjectName: '地理',
								max: 100,
								subjectScore: ''
							},
						]
					},
				],
				subjectList: [],
				firstChoice: [],
				theChoice: [],
				loading: false
			}
		},
		watch: {
			show: {
				handler(val) {
					if (val) {
						this.selectedSubjects()
					}
				},
				deep: true,
				immediate: true
			}
		},
		computed:{
			_show:{
				get(){
					return this.show
				},
				set(val){
					this.$emit('update:show',val)
				}
			}
		},
		methods: {
			// 修改成绩
			onChange(e) {
				const name = e.currentTarget.dataset.name
				const num = e.detail
				this.scoreList.scoreInfos.filter((item, index) => {
					if (item.subjectName == name) {
						this.scoreList.scoreInfos[index].schoolRank = num
					}
				})
			},
			// 修改选科
			selectedSubjects() {
				let list = []
				const scoreInfos = this.scoreList.scoreInfos
				this.filterList.forEach((item, index) => {
					item.list.forEach((sub, sIndex) => {
						scoreInfos.forEach((info, i) => {
							if (info.subjectId == sub.id || info.id == sub.id) {
								sub.on = true
								sub.subjectScore = info.subjectScore
								this.filterList[index].list[sIndex] = sub
								list.push(sub)
								if (item.key == 'firstChoice') {
									this.firstChoice = [sub]
								} else if (item.key == 'theChoice') {
									this.theChoice = [...this.theChoice, ...[sub]]
								}
							}
						})
					})
				})
				this.subjectList = list
				this.show = true
			},
			//  选择科目
			tagClick(e) {
				const {
					key,
					tag
				} = e.currentTarget.dataset
				const {
					filterList
				} = this
				// 增加和删除数据
				let list = []
				if (key == 'firstChoice') {
					if (!tag.on) {
						this.firstChoice = [tag]
					} else {
						this.firstChoice = []
					}
					filterList.filter((pitem, index) => {
						if (pitem.key == key) {
							pitem.list.filter(item => {
								if (JSON.stringify(item) == JSON.stringify(tag)) {
									item.on = !item.on
								} else {
									item.on = false
								}
								list.push(item)
							})
							this.filterList[index].list = list
						}
					})

				} else {
					let theList = []
					filterList.filter((pitem) => {
						if (pitem.key == key) {
							pitem.list.filter(item => {
								if (item.on) {
									theList.push(item)
								}
							})
						}
					})
					if (tag.on) {
						theList.filter((item, index) => {
							if (item.id == tag.id) {
								theList.splice(index, 1)
							}
						})
					} else {
						theList = [...theList, ...[tag]]
					}
					if (theList.length <= 2) {
						filterList.filter((pitem, index) => {
							if (pitem.key == key) {
								pitem.list.filter(item => {
									if (JSON.stringify(item) == JSON.stringify(tag)) {
										item.on = !item.on
									}
									list.push(item)
								})
								this.filterList[index].list = list
							}
						})
						this.theChoice = theList
					} else {
						uni.showToast({
							title: '在选科目只能(四选二)',
							icon: 'none',
							duration: 2000
						})
					}
				}
			},
			// 取消
			cancelTap() {
				this.onClose()
				this.$emit('onCancel')
			},
			// 隐藏
			onClose() {
				this.filterList.forEach((item, index) => {
					if (item.key != 'fixedChoice') {
						item.list.forEach((sub, i) => {
							if (sub.on) {
								this.filterList[index].list[i].on = false
							}
						})
					}
				})
				this._show = false
			},
			// 确定选科
			onSubmit() {
				let subjectList = []
				this.filterList.forEach(item => {
					item.list.forEach(sub => {
						if (sub.on) {
							subjectList.push(sub)
						}
					})
				})
				if (subjectList.length == 6) {
					this.$emit('on-subjects', {
						subjectList,
						type: this.type
					})
					this.onClose()
				} else {
					uni.showToast({
						title: '请选择科目',
						icon: 'none',
						duration: 2000
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* pages/expert/index/expert-item/index.wxss */

	.filter-item {
		padding: 10rpx 10rpx 5rpx;
		margin-bottom: 10rpx;
	}

	.filter-item .tit {
		margin-bottom: 20rpx;
		height: 80rpx;
	}

	.filter-item .tag {
		margin: 0 20rpx 20rpx 0;
		width: 335rpx;
		height: 80rpx;
		background: #FFFFFF;
		border: 1px solid #EBEBF0;
		border-radius: 8rpx;
	}

	.filter-item .on {
		background: #F5FAF7;
		border: 1px solid #00C15D;
	}

	.top-action {
		height: 88rpx;
	}

	.top-action .colse {
		background-color: #fff;
	}

	.top-action .filter {
		background-color: #00C15D;
	}

	.top-action .btn {
		width: 335rpx;
		height: 84rpx;
		border-radius: 8rpx;
		border: 0 none !important
	}

	.top-action .btn-00C15D {
		margin-right: 20rpx;
		border: 1px solid #00C15D !important;
	}
</style>